<template>
    <div class="quotation_detail_box" v-loading.fullscreen.lock="fullscreenLoading">
        <div class="tab_left_infos">
            <div class="inbox_head_info">
                <div class="heda_time">创建时间</div>
                <div class="pro_box_num">当前版本</div>
                <div class="pro_box_price">总价</div>
                <div class="pro_box_old">折扣价</div>
                <div class="pro_box_outher">操作</div>
            </div>
            <div class="inbox_head_info body_info">
                <div class="heda_time" style="margin-top: 6px">{{ quotationInfo.create_time }}</div>
                <div class="pro_box_num" style="margin-top: 6px"><span
                    style="display: inline-block;width: 26px"></span>{{ quotationInfo.version }}
                </div>
                <div class="pro_box_price"></div>
                <div class="pro_box_old"></div>
                <div class="pro_box_outher">
                    <div class="chang_box">
                        <div class="add" @click="showGoodsModal">添加产品</div>
                        <div class="delete" @click="removeShow">删除</div>
                        <div class="save" @click="saveGoodsInfo">保存更新</div>
                        <div class="cahng_box_btn_oud">
                            <div class="box_infos_tab_item" @click="helpOfferDwload(2)">
                                生成报价单
                                <img v-if="userInfo && userInfo.help_quotation && userInfo.help_quotation==1" src="../../../assets/zksq-red-packup@2x(1).png">
                            </div>
                            <div
                                class="chang_infos_meng"
                                @click="showHelpModal"
                                v-if="userInfo && userInfo.help_quotation && userInfo.help_quotation==1">
                                帮人生成报价单
                            </div>
                        </div>
                        <div class="cahng_box_btn_order">
                            <div class="box_infos_tab_item" @click="goConfirmOrder(2,1)">
                                下单 <img v-if="userInfo && userInfo.is_inside && userInfo.is_inside==1" src="../../../assets/zksq-red-packup@2x(1).png">
                            </div>
                            <div
                                class="chang_infos_meng"
                                @click="goConfirmOrder(2,2)"
                                v-if="userInfo && userInfo.is_inside && userInfo.is_inside==1">
                                帮人下单
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="good_info_tans">
                <div class="goods_infos" v-for="(item,index) in quotationInfo.goods" :key="index">
                    <div class="good_img">
                        <img :src="item.goods_image">
                    </div>
                    <div class="right_infos">
                        <div class="order_infos_goods">
                            <div class="name_box_infos">{{ item.goods_name }}</div>
                            <div class="icons">x</div>
                            <div class="num">
                                <el-input-number @change="munberChang(index)" v-model="item.num" :min="1"></el-input-number>
                            </div>
                            <div class="price_goods">￥{{ parseFloat(item.not_dis_price * item.num) }}</div>
                            <div class="price_goods">￥{{ item.all_price }}</div>
                            <div @click="changCheck(index)" :class="{'check':item.check}" class="select_all">
                                <img v-if="item.check" src="../../../assets/allselect.png"/>
                            </div>
                        </div>
                        <div class="info_smodel">
                            <span>型号：{{ item.goods_model }}</span>
                            <span>
                                单价：
                                <label v-if="item.goods_old_price != item.not_dis_price">￥{{ parseFloat(item.goods_old_price).toFixed(2) }}</label>
                                ￥{{ parseFloat(item.not_dis_price).toFixed(2) }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="price_info">
                <div>总价：<span>￥{{totalPrice}}</span></div>
                <!--                <div>折扣：<span>{{quotationInfo.dis}}%</span></div>-->
                <div>折扣价：<span>￥{{totalDisPrice}}</span></div>
            </div>
        </div>
        <!--报价单-->
        <transition name="slide-fade">
            <div class="city_location_box" v-if="helpShow">
                <div class="location_box">
                    <div class="tips_title">帮人生成报价单</div>
                    <div class="line"></div>
                    <img @click="helpShow=false" src="../../../assets/window-icon-close-black.png" class="close">
                    <div class="content_box_infos_tabcar">
                        <div class="tab_infos_input">
                            <div class="titles">帮人下单</div>
                            <input v-model="phone" placeholder="请输入手机号"/>
                            <div @click="SearchUser" class="btns">确认</div>
                        </div>
                        <div class="Tab_cars" v-if="outhUserInfo.id">
                            <div class="top">
                                <div style="margin-right: 36px">姓名：{{ outhUserInfo.name }}</div>
                                <div>手机号：{{ outhUserInfo.phone }}</div>
                            </div>
                            <div class="bottomes">单位名称：{{ outhUserInfo.company }}</div>
                        </div>
                    </div>
                    <div class="tips_btn">
                        <div @click="helpShow=false">取消</div>
                        <div @click="helpOffer">生成报价单</div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="slide-fade">
            <div class="city_location_box" v-if="userQuotationShow">
                <div class="location_box">
                    <div class="tips_title">生成报价单成功</div>
                    <div class="line"></div>
                    <img @click="userQuotationShow=false" src="../../../assets/window-icon-close-black.png" class="close">
                    <div class="tab_user_quotation">
                        <div class="user_info_item">
                            <div class="left">用户账号：</div>
                            <div class="right">{{ helpUserQuotationInfo.phone }}</div>
                        </div>
                        <div class="user_info_item">
                            <div class="left">所在单位：</div>
                            <div class="right">{{ helpUserQuotationInfo.company }}</div>
                        </div>
                        <div class="user_info_item">
                            <div class="left">所在部门（系/学院）：</div>
                            <div class="right">{{ helpUserQuotationInfo.department }}</div>
                        </div>
                    </div>
                    <div class="tips_btn">
                        <div @click="userQuotationShow=false">取消</div>
                        <div @click="helpOfferDwload">下载为PDF</div>
                    </div>
                </div>
            </div>
        </transition>
        <!--删除-->
        <transition name="slide-fade">
            <div class="city_location_box" v-if="delect">
                <div class="location_box">
                    <div class="tips_title">确认移除</div>
                    <div class="line"></div>
                    <img @click="closeDelect" src="../../../assets/window-icon-close-black.png" class="close">
                    <div class="content_box_infos">确认移除所选内容</div>
                    <div class="tips_btn">
                        <div @click="closeDelect">取消</div>
                        <div style="width: 69px" @click="remove">确认</div>
                    </div>
                </div>
            </div>
        </transition>
        <!--添加产品-->
        <transition name="slide-fade">
            <div class="city_location_box" v-if="modelAddShow">
                <div class="location_box mode_contents">
                    <div class="tips_title">添加商品</div>
                    <div class="line"></div>
                    <img @click="modelAddShow = false" src="../../../assets/window-icon-close-black.png" class="close">
                    <div class="model_info_contents">
                        <div class="check_box_info_search">
                            <div class="search_box">搜索产品：
                                <div class="search_info_car">
                                    <div class="searc_list" v-if="searchList.length">
                                        <div @click="specList(item.id)" v-for="(item,index) in searchList" :key="index">{{
                                            item.name
                                            }}
                                        </div>
                                    </div>
                                    <input v-model="searchTxt" @input="SearchLsit" placeholder="请输入名称"/><img
                                    src="../../../assets/search-black.png"></div>
                            </div>
                            <div class="car_info_spece">产品规格：
                                <div @click="addGoodsSpecList">添加所选型号</div>
                            </div>
                            <div class="spec_info_tabs">
                                <div class="spec_chang_infos_cat_box" v-for="(item,index) in goodsSpecList" :key="index">
                                    <div class="check_box_img_titles">{{ item.name }}</div>
                                    <div class="spec_model_box">
                                        <div :class="{'no_active':item.check}" class="chenck_box_info_tab" v-for="(items,indexs) in item.models" :key="indexs">
                                            <div @click="specChangCheck(index,indexs,item)" :class="{'spec_check':items.select}" class="splec_select_all">
                                                <img v-if="items.select" src="../../../assets/allselect.png"/>
                                            </div>
                                            <div>{{ items.models }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="content_spec_list" v-if="carGoodSpeclist.length">
                            <div class="info_title_spect">已添加</div>
                            <div class="sepc_info_box">
                                <div class="box_ser_goods" v-for="(item,index) in carGoodSpeclist" :key="index">
                                    <div class="cover_ing_goods">
                                        <img :src="item.cover">
                                    </div>
                                    <div class="info_content">
                                        <div class="box_cheng_time_json">
                                            <div class="name_titke_spec">{{item.models.name}}</div>
                                            <div class="units">X</div>
                                            <div class="num">
                                                <el-input-number @change="specMunberChang(index)" v-model="item.num" :min="1"></el-input-number>
                                                <div @click="removeAppend(item, index)" class="add-pro-remove">移除</div>
                                            </div>
                                        </div>
                                        <div class="box_img_model_infos">
                                            <div style="margin-right: 77px">型号：{{ item.models.models }}</div>
                                            <div>单价：￥{{ item.models.price }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tips_btn">
                        <div @click="modelAddShow = false">取消</div>
                        <div style="width: 69px" @click="QuotationAppend">确认</div>
                    </div>
                </div>
            </div>
        </transition>
        <el-dialog :visible.sync="makepdfVisible" center title="操作提示" width="500px">
            <div class="message">报价单生成成功</div>
            <span class="dialog-footer" slot="footer">
                <el-button @click="makepdfVisible = false" size="medium">关 闭</el-button>
                <el-button @click="DownloadPdf" icon="el-icon-download" size="medium" type="success">下 载</el-button>
                <el-button @click="showPdf" icon="el-icon-view" size="medium" type="primary">查 看</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {getQuotationInfo, makeHelpQuotation, makePdf, productDetail, quotationAppend, saveQuotation, searchGoods, searchUser} from "@/api/apis";
    import {mapState} from "vuex";

    export default {
        name: "QuotationDetail",
        data() {
            return {
                id: '',
                quotationInfo: {},
                outhUserInfo: {},
                phone: '',
                helpShow: false,
                helpUserQuotationInfo: {},
                userQuotationShow: false,
                fullscreenLoading: false,
                delect: false,
                delect_id: [],
                delect_index: [],
                saveGoods: [],
                modelAddShow: false,
                searchList: [],
                searchTxt: '',
                goodsSpecList: [],
                carGoodSpeclist: [],
                makepdfVisible: false,
                makepdfData: {},
                tempQuotationInfo: {}
            }
        },
        computed: {
            totalPrice() {
                let money = 0;
                if (this.quotationInfo && this.quotationInfo.goods && this.quotationInfo.goods.length) {
                    this.quotationInfo.goods.map((item) => {
                        money += item.not_dis_price * item.num * 100;
                    });
                }
                return parseFloat(money / 100).toFixed(2);
            },
            totalDisPrice() {
                let money = 0;
                if (this.quotationInfo && this.quotationInfo.goods && this.quotationInfo.goods.length) {
                    this.quotationInfo.goods.map((item) => {
                        money += item.goods_price * item.num * 100;
                    });
                }
                return parseFloat(money / 100).toFixed(2);
            },
            ...mapState(["userInfo"])
        },
        mounted() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
            }
            this.getQuotationInfo()
            // this.specList(2)
        },
        beforeRouteLeave(to, from, next) {
            this.checkModified(next);
        },
        methods: {
            specList(e) {
                this.searchList = []
                let data = {goods_id: e, quotation_id: this.id}
                productDetail(data).then(res => {
                    if (res.data.spec.length) {
                        res.data.spec.map(item => {
                            item.models.map(items => {
                                items.select = false
                                item.num = 1
                            })
                        })
                    }
                    this.goodsSpecList = res.data.spec
                })
            },
            specMunberChang(e) {
                this.specPriceChang(this.carGoodSpeclist[e].num, e)
            },
            //价格改变
            specPriceChang(num, index) {
                let obj = this.carGoodSpeclist[index]
                obj.models.price = obj.price
                if (obj.models.more_price.length) {
                    obj.models.more_price.map(items => {
                        if (num >= items.num) {
                            obj.models.price = items.price
                        }
                    });
                }
            },
            specChangCheck(index, indexs, item) {
                if (!item.check) {
                    this.goodsSpecList[index].models[indexs].select = !this.goodsSpecList[index].models[indexs].select
                }
            },
            showGoodsModal() {
                this.checkModified(() => {
                    this.modelAddShow = true;
                });
            },
            addGoodsSpecList() {
                let arr = []
                if (this.goodsSpecList.length) {
                    this.goodsSpecList.map(item => {
                        item.models.map(items => {
                            if (items.select) {
                                let obj = {
                                    cover: item.cover,
                                    models: items,
                                    num: 1,
                                    price: items.price
                                }
                                arr.push(obj)
                            }
                        })
                    })
                }
                this.carGoodSpeclist = arr;
            },
            removeAppend(item, index) {
                this.carGoodSpeclist.splice(index, 1);
            },
            SearchLsit() {
                let data = {name: this.searchTxt, type: 1}
                searchGoods(data).then(res => {
                    this.searchList = res.data
                })
            },
            QuotationAppend() {
                let modelsArr = []
                if (this.carGoodSpeclist.length) {
                    this.carGoodSpeclist.map(item => {
                        let obj = {
                            id: item.models.id,
                            number: item.num
                        }
                        modelsArr.push(obj)
                    })
                    let data = {quotation_id: this.id, models: modelsArr}
                    quotationAppend(data).then(() => {
                        this.$message.success('添加成功')
                        this.getQuotationInfo()
                        this.modelAddShow = false
                    })
                }
            },
            remove() {
                this.SaveQuotation(1)
            },
            removeShow() {
                this.fullscreenLoading = true
                let arr = []
                let arr_new = []
                this.quotationInfo.goods.map((item, index) => {
                    if (item.check) {
                        let goods = {
                            id: item.id,
                            num: item.num,
                            goods_name: item.goods_name
                        }
                        this.saveGoods.push(goods)
                        arr.push(item.id)
                        arr_new.push(index)
                    }
                })
                this.delect_id = arr
                this.delect_index = arr_new
                if (this.quotationInfo.goods.length == this.delect_id.length) {
                    this.$confirm('执行当前操作后该报价单将没有任何产品了，确认继续操作？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.fullscreenLoading = false
                        this.delect = true
                    }).catch(() => {
                        this.fullscreenLoading = false
                    });
                } else {
                    this.fullscreenLoading = false
                    this.delect = true
                }
            },
            closeDelect() {
                this.delect = false
                this.delect_id = []
                this.delect_index = []
            },
            saveGoodsInfo(callback) {
                this.quotationInfo.goods.map((item) => {
                    let goods = {
                        id: item.id,
                        num: item.num,
                        goods_name: item.goods_name
                    }
                    this.saveGoods.push(goods)
                })
                this.SaveQuotation(callback)
            },
            SaveQuotation(callback) {
                let data = {
                    id: this.quotationInfo.id,
                    del_goods_arr: this.delect_id,
                    goods: this.saveGoods
                }
                saveQuotation(data).then(() => {
                    this.$message.success('操作成功')
                    this.saveGoods = []
                    this.delect_id = []
                    this.getQuotationInfo(callback)
                    this.delect = false
                })
            },
            SearchUser() {
                let data = {phone: this.phone}
                searchUser(data).then(res => {
                    this.outhUserInfo = res.data
                })
            },
            helpOfferDwload(e) {
                this.checkModified(() => {
                    this.fullscreenLoading = true
                    let data = {}
                    if (e == 1) {
                        data = {quotation_id: this.helpUserQuotationInfo.quotation_id, type: 2}
                    } else {
                        data = {quotation_id: this.quotationInfo.id, type: 2}
                    }
                    makePdf(data).then(result => {
                        this.fullscreenLoading = false;
                        if (result.status === 'SUCCESS') {
                            this.makepdfVisible = true;
                            this.makepdfData = result.data;
                        }
                    });
                });
            },
            showHelpModal() {
                this.checkModified(() => {
                    this.helpShow = true;
                });
            },
            DownloadPdf() {
                window.open(this.makepdfData.download);
            },
            showPdf() {
                window.open(this.makepdfData.show);
            },
            //帮人生成报价单
            helpOffer() {
                if (this.outhUserInfo.id) {
                    this.makeQuotation(this.outhUserInfo.id)
                } else {
                    this.$message.warning('请搜索你要帮助下单的人员')
                }
            },
            //报价单
            makeQuotation(user_id) {
                this.fullscreenLoading = true
                this.helpShow = false
                let data = {quotation_id: this.quotationInfo.id, user_id: user_id}
                makeHelpQuotation(data).then(res => {
                    this.helpUserQuotationInfo = res.data
                    this.userQuotationShow = true
                    this.fullscreenLoading = false
                })
            },
            goConfirmOrder(e, i) {
                if (parseInt(this.quotationInfo.isExpire)) {
                    this.$message.warning("报价单已超出有有效期，不能下单！");
                } else {
                    this.$router.push({name: 'confirmOrder', query: {type: e, car_id_list: this.quotationInfo.id, user_type: i}});
                }
            },
            changCheck(e) {
                this.quotationInfo.goods[e].check = !this.quotationInfo.goods[e].check
            },
            munberChang(e) {
                this.priceChang(this.quotationInfo.goods[e].num, e)
            },
            //价格改变
            priceChang(num, index) {
                let obj = this.quotationInfo.goods[index]
                obj.not_dis_price = obj.goods_old_price;
                obj.goods_price = obj.goods_old_price;
                if (obj.more_price.length) {
                    let chFlag = true;
                    obj.more_price.map(items => {
                        console.log(num, items.num, num >= items.num)
                        if (chFlag && num >= items.num) {
                            chFlag = false;
                            obj.not_dis_price = items.price;
                        }
                    })
                }
                if(this.quotationInfo.dis > 0){
                    obj.goods_price = Math.floor(obj.not_dis_price * (100 - this.quotationInfo.dis) / 100);
                }else{
                    obj.goods_price = obj.not_dis_price;
                }
                obj.all_price = Math.floor(obj.goods_price * obj.num);
            },
            getQuotationInfo(callback) {
                let data = {id: this.id}
                getQuotationInfo(data).then(res => {
                    if (res.data.goods.length) {
                        res.data.goods.map(item => {
                            item.check = false
                        })
                    }
                    this.quotationInfo = res.data
                    this.tempQuotationInfo = JSON.parse(JSON.stringify(res.data));
                    if (typeof callback == 'function') {
                        callback();
                    }
                })
            },
            checkModified(callback) {
                if (this.isModified()) {
                    let confirmHtml = `
                    <div class="confirm-message">检测到未保存的内容，是否在操作前保存修改？</div>
                    <div class="confirm-desc">关闭撤销当前操作！</div>
                    `;
                    this.$confirm(confirmHtml, "修改确认", {
                        confirmButtonText: "保存并继续",
                        cancelButtonText: "放弃并继续",
                        dangerouslyUseHTMLString: true,
                        distinguishCancelAndClose: true
                    }).then(() => {
                        this.saveGoodsInfo(callback);
                    }).catch((action) => {
                        if (action === 'cancel') {
                            this.quotationInfo = JSON.parse(JSON.stringify(this.tempQuotationInfo));
                            if (typeof callback == 'function') {
                                callback();
                            }
                        }
                    })
                } else {
                    if (typeof callback == 'function') {
                        callback();
                    }
                }
            },
            isModified() {
                if (this.quotationInfo.goods.length != this.tempQuotationInfo.goods.length) {
                    return true;
                }
                let newGoods = this.quotationInfo.goods;
                let oldGoods = this.tempQuotationInfo.goods;
                let newStr = "", oldStr = "";
                for (let i in newGoods) {
                    let item = newGoods[i];
                    newStr += item.id + ":" + item.num + ";";
                }
                for (let i in oldGoods) {
                    let item = oldGoods[i];
                    oldStr += item.id + ":" + item.num + ";";
                }
                if (oldStr != newStr) {
                    return true;
                }
                return false;
            }
        }
    }
</script>
<style lang="less">
    .el-message-box {
        .el-message-box__container {
            .confirm-message {
            
            }
            
            .confirm-desc {
                font-size: 12px;
                color: #9D9D9D;
            }
        }
    }
    
    .quotation_detail_box {
        .order_infos_goods {
            .num {
                .el-input-number {
                    .el-input__inner {
                        line-height: 28px;
                    }
                }
            }
        }
    }
</style>
<style scoped lang="less">
    .quotation_detail_box {
        .tab_left_infos {
            margin-top: 28px;
            
            .inbox_head_info {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #000000;
                
                .heda_time {
                    width: 252px;
                }
                
                .pro_box_num {
                    width: 325px;
                }
                
                .pro_box_price {
                    width: 128px;
                }
                
                .pro_box_old {
                    width: 104px;
                }
                
                .pro_box_outher {
                    width: 390px;
                }
            }
            
            .body_info {
                margin-top: 23px;
                align-items: flex-start;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                
                .pro_box_outher {
                    .chang_box {
                        display: flex;
                        justify-content: space-between;
                        
                        div {
                            box-sizing: border-box;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            line-height: 30px;
                            
                        }
                        
                        .add {
                            width: 70px;
                            height: 30px;
                            border: 1px solid #B11E24;
                            color: #B11E24;
                            text-align: center;
                        }
                        
                        .delete {
                            width: 50px;
                            height: 30px;
                            border: 1px solid #B11E24;
                            color: #B11E24;
                            text-align: center;
                        }
                        
                        .save {
                            text-align: center;
                            color: #000000;
                            width: 70px;
                            height: 30px;
                            border: 1px solid #000000;
                        }
                        
                        .cahng_box_btn_oud {
                            width: 110px;
                            position: relative;
                            
                            .box_infos_tab_item {
                                display: flex;
                                align-items: center;
                                background: black;
                                color: #FFFFFF;
                                justify-content: center;
                                
                                img {
                                    width: 10px;
                                    height: 6px;
                                    margin-left: 5px;
                                    transform: rotate(180deg);
                                    transition: all 0.3s linear;
                                }
                            }
                            
                            .chang_infos_meng {
                                position: absolute;
                                width: 100%;
                                left: 0;
                                height: 0;
                                overflow: hidden;
                                border: 1px solid #000000;
                                text-align: center;
                                transition: all 0.3s linear;
                            }
                        }
                        
                        .cahng_box_btn_oud:hover .chang_infos_meng {
                            height: 34px;
                        }
                        
                        .cahng_box_btn_oud:hover .box_infos_tab_item img {
                            transform: rotate(0deg);
                        }
                        
                        .cahng_box_btn_order {
                            width: 70px;
                            position: relative;
                            
                            .box_infos_tab_item {
                                display: flex;
                                align-items: center;
                                background: #B11E24;
                                color: #FFFFFF;
                                justify-content: center;
                                
                                img {
                                    width: 10px;
                                    height: 6px;
                                    margin-left: 5px;
                                    transform: rotate(180deg);
                                    transition: all 0.3s linear;
                                }
                            }
                            
                            .chang_infos_meng {
                                position: absolute;
                                width: 100%;
                                height: 0px;
                                overflow: hidden;
                                border: 1px solid #B11E24;
                                text-align: center;
                                color: #B11E24;
                                transition: all 0.3s linear;
                            }
                        }
                        
                        .cahng_box_btn_order:hover .chang_infos_meng {
                            height: 34px;
                        }
                        
                        .cahng_box_btn_order:hover .box_infos_tab_item img {
                            transform: rotate(0deg);
                        }
                    }
                }
                
                .good_info_tans {
                
                }
            }
            
            .good_info_tans {
                margin-top: 21px;
                
                .goods_infos {
                    display: flex;
                    margin-bottom: 31px;
                    
                    .good_img {
                        width: 89px;
                        height: 62px;
                        
                        img {
                            width: 62px;
                            height: 100%;
                            object-fit: contain;
                        }
                    }
                    
                    .right_infos {
                        width: 770px;
                        height: auto;
                        margin-right: 5px;
                        
                        .order_infos_goods {
                            display: flex;
                            align-items: center;
                            
                            .name_box_infos {
                                width: 300px;
                                font-size: 12px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                line-height: 20px;
                                color: #000000;
                            }
                            
                            .icons {
                                font-size: 12px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                line-height: 28px;
                                color: #000000;
                                margin: 0 30px 0 20px;
                            }
                            
                            .num {
                                width: 80px;
                                margin-right: 40px;
                                
                                /deep/ .el-input {
                                    height: 28px;
                                }
                                
                                /deep/ .el-input-number__decrease:hover {
                                    color: #000000;
                                }
                                
                                /deep/ .el-input-number__increase:hover {
                                    color: #000000;
                                }
                                
                                /deep/ .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
                                    border-color: #000000;
                                }
                                
                                /deep/ .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
                                    border-color: #000000;
                                }
                                
                                /deep/ .el-input-number__decrease {
                                    width: 33%;
                                    background: #FFFFFF;
                                    border-color: #FFFFFF;
                                    color: #000000;
                                    height: 25px;
                                    box-sizing: border-box;
                                    line-height: 25px;
                                }
                                
                                /deep/ .el-input-number__increase {
                                    width: 33%;
                                    background: #FFFFFF;
                                    border-color: #FFFFFF;
                                    color: #000000;
                                    height: 25px;
                                    box-sizing: border-box;
                                    line-height: 25px;
                                }
                                
                                /deep/ .el-input-number .el-input__inner {
                                    padding: 0;
                                }
                                
                                /deep/ .el-input-number {
                                    width: 100%;
                                    border-color: #000000;
                                    background-color: #FFFFFF;
                                    line-height: 28px;
                                }
                                
                                /deep/ .el-input__inner {
                                    background-color: #FFFFFF;
                                    border-color: #000000;
                                    height: 28px;
                                }
                                
                                /deep/ el-input__inner:focus {
                                    border-color: #FFFFFF;
                                }
                            }
                            
                            .price_goods {
                                min-width: 54px;
                                font-size: 14px;
                                font-family: Microsoft YaHei;
                                font-weight: 400;
                                color: #000000;
                                margin-right: 72px;
                            }
                            
                            .select_all {
                                width: 16px;
                                height: 16px;
                                border: 1px solid #000000;
                                box-sizing: border-box;
                                border-radius: 1px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                margin-right: 10px;
                                
                                img {
                                    width: 10px;
                                    height: 7px;
                                }
                            }
                            
                            .check {
                                border-color: #B11E24 !important;
                                background: #B11E24;
                            }
                        }
                        
                        .info_smodel {
                            margin-top: 4px;
                            display: flex;
                            align-items: center;
                            font-size: 12px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            color: #000000;
                            
                            span {
                                margin-right: 44px;
                                
                                label {
                                    margin-right: 5px;
                                    text-decoration: line-through;
                                }
                            }
                        }
                    }
                }
            }
            
            .price_info {
                display: flex;
                align-items: center;
                
                div {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    margin-right: 98px;
                    
                    span {
                        font-size: 24px;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        color: #000000;
                    }
                }
            }
        }
    }
    
    .city_location_box {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.21);
        left: 0;
        bottom: 0;
        z-index: 5;
        
        .location_box {
            width: 480px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #9D9D9D;
            padding: 32px 0 28px;
            z-index: 6;
            background: #FFFFFF;
            
            .tips_title {
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
                margin-bottom: 17px;
                text-align: center;
            }
            
            .line {
                width: 477px;
                height: 2px;
                background: #E9E9E9;
                //border: 1px solid #E9E9E9;
                box-sizing: border-box;
                margin-bottom: 37px;
            }
            
            .content_box_infos {
                padding: 0 13px;
                margin-bottom: 27px;
                text-align: center;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #000000;
            }
            
            .tips_btn {
                display: flex;
                align-items: center;
                justify-content: center;
                
                div {
                    width: 69px;
                    height: 30px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    line-height: 30px;
                    text-align: center;
                }
                
                div:nth-child(1) {
                    border: 1px solid #C7C7C7;
                    color: #9D9D9D;
                    box-sizing: border-box;
                    margin-right: 10px;
                }
                
                div:nth-child(2) {
                    width: 106px;
                    color: #FFFFFF;
                    background: #B11E24;
                }
            }
            
            .close {
                width: 18px;
                height: 18px;
                position: absolute;
                z-index: 7;
                right: 10px;
                cursor: pointer;
                top: 10px;
            }
            
            .content_box_infos_tabcar {
                width: 342px;
                margin: 0 auto 23px;
                
                .tab_infos_input {
                    margin-bottom: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    
                    .titles {
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                    }
                    
                    input {
                        width: 165px;
                        height: 30px;
                        background: #FFFFFF;
                        padding: 0 12px;
                        border: 1px solid #C7C7C7;
                        font-size: 12px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #C7C7C7;
                    }
                    
                    .btns {
                        width: 68px;
                        height: 30px;
                        background: #B11E24;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        line-height: 30px;
                        color: #FFFFFF;
                        text-align: center;
                    }
                }
                
                .Tab_cars {
                    padding: 17px 20px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    background: #F7F7F7;
                    
                    .top {
                        display: flex;
                        margin-bottom: 10px;
                    }
                }
            }
            
            .tab_user_quotation {
                padding: 0 38px;
                margin-bottom: 19px;
                
                .user_info_item {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #000000;
                    margin-bottom: 10px;
                    
                    .left {
                        width: 150px;
                        text-align: right;
                        
                    }
                }
            }
        }
        
        .mode_contents {
            width: 1200px;
            
            .line {
                width: 100%;
            }
            
            .model_info_contents {
                margin-bottom: 40px;
                
                .check_box_info_search {
                    padding: 0 50px;
                    
                    .search_box {
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                        margin-bottom: 20px;
                        
                        .search_info_car {
                            display: flex;
                            width: 160px;
                            height: 30px;
                            align-items: center;
                            border: 1px solid #000000;
                            box-sizing: border-box;
                            padding: 0 11px;
                            position: relative;
                            
                            input {
                                border: none;
                                width: 118px;
                            }
                            
                            img {
                                width: 16px;
                                height: 16px;
                            }
                            
                            .searc_list {
                                width: 100%;
                                padding: 10px;
                                position: absolute;
                                top: 30px;
                                left: 0;
                                border: 1px solid #000000;
                                border-top: none;
                                box-sizing: border-box;
                                z-index: 10;
                                background: #FFFFFF;
                                
                                div {
                                    font-size: 14px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #9D9D9D;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    margin-bottom: 10px;
                                }
                                
                                div:hover {
                                    color: #B11E24;
                                }
                            }
                        }
                    }
                    
                    .car_info_spece {
                        display: flex;
                        width: 648px;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                        margin-bottom: 22px;
                        
                        div {
                            width: 106px;
                            height: 30px;
                            background: #B11E24;
                            font-size: 14px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            line-height: 30px;
                            color: #FFFFFF;
                            text-align: center;
                        }
                    }
                    
                    .spec_info_tabs {
                        .spec_chang_infos_cat_box {
                            margin-bottom: 30px;
                            
                            .check_box_img_titles {
                                font-size: 16px;
                                font-family: Microsoft YaHei;
                                font-weight: bold;
                                color: #000000;
                                margin-bottom: 20px;
                            }
                            
                            .spec_model_box {
                                display: flex;
                                align-items: center;
                                flex-wrap: wrap;
                                
                                .chenck_box_info_tab {
                                    margin-right: 60px;
                                    font-size: 14px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #000000;
                                    display: flex;
                                    align-items: center;
                                    
                                    .splec_select_all {
                                        width: 16px;
                                        height: 16px;
                                        border: 1px solid #000000;
                                        border-radius: 1px;
                                        box-sizing: border-box;
                                        margin-right: 10px;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        
                                        img {
                                            width: 10px;
                                            height: 7px;
                                        }
                                    }
                                    
                                    .spec_check {
                                        border-color: #B11E24;
                                        background: #B11E24;
                                    }
                                }
                                
                                .no_active {
                                    .splec_select_all {
                                        border-color: #999999;
                                        color: #999999;
                                    }
                                }
                            }
                        }
                    }
                }
                
                .content_spec_list {
                    background: #F7F7F7;
                    padding: 17px 50px;
                    max-height: 350px;
                    overflow-y: scroll;
                    
                    .info_title_spect {
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #000000;
                        margin-bottom: 30px;
                    }
                    
                    .sepc_info_box {
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        
                        .box_ser_goods {
                            width: 520px;
                            display: flex;
                            margin-bottom: 20px;
                            
                            .cover_ing_goods {
                                width: 62px;
                                height: 62px;
                                margin-right: 20px;
                                
                                img {
                                    width: 100%;
                                    height: 100%;
                                    object-fit: cover;
                                }
                            }
                            
                            .info_content {
                                width: 438px;
                                //width: (100% - 85px);
                                .box_cheng_time_json {
                                    display: flex;
                                    align-items: center;
                                    
                                    .name_titke_spec {
                                        width: 300px;
                                        max-height: 77px;
                                        font-size: 12px;
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                        line-height: 20px;
                                        color: #000000;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        display: -webkit-box;
                                        -webkit-line-clamp: 4;
                                        -webkit-box-orient: vertical;
                                    }
                                    
                                    .units {
                                        margin: 0 30px 0 20px;
                                        font-size: 12px;
                                        font-family: Microsoft YaHei;
                                        font-weight: 400;
                                        line-height: 28px;
                                        color: #000000;
                                    }
                                    
                                    .num {
                                        width: 80px;
                                        
                                        /deep/ .el-input {
                                            height: 28px;
                                            line-height: 28px;
                                        }
                                        
                                        /deep/ .el-input-number__decrease:hover {
                                            color: #000000;
                                        }
                                        
                                        /deep/ .el-input-number__increase:hover {
                                            color: #000000;
                                        }
                                        
                                        /deep/ .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
                                            border-color: #000000;
                                        }
                                        
                                        /deep/ .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
                                            border-color: #000000;
                                        }
                                        
                                        /deep/ .el-input-number__decrease {
                                            width: 33%;
                                            background: #FFFFFF;
                                            border-color: #FFFFFF;
                                            color: #000000;
                                            height: 25px;
                                            box-sizing: border-box;
                                            line-height: 25px;
                                        }
                                        
                                        /deep/ .el-input-number__increase {
                                            width: 33%;
                                            background: #FFFFFF;
                                            border-color: #FFFFFF;
                                            color: #000000;
                                            height: 25px;
                                            box-sizing: border-box;
                                            line-height: 25px;
                                        }
                                        
                                        /deep/ .el-input-number .el-input__inner {
                                            padding: 0;
                                        }
                                        
                                        /deep/ .el-input-number {
                                            width: 100%;
                                            border-color: #000000;
                                            background-color: #FFFFFF;
                                            line-height: 28px;
                                        }
                                        
                                        /deep/ .el-input__inner {
                                            background-color: #FFFFFF;
                                            border-color: #000000;
                                            height: 28px;
                                        }
                                        
                                        /deep/ el-input__inner:focus {
                                            border-color: #FFFFFF;
                                        }
                                        
                                        .add-pro-remove {
                                            color: #9D9D9D;
                                            text-align: center;
                                            font-size: 14px;
                                            padding: 10px;
                                        }
                                    }
                                }
                                
                                .box_img_model_infos {
                                    display: flex;
                                    align-items: center;
                                    margin-top: 4px;
                                    font-size: 12px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    color: #000000;
                                }
                            }
                        }
                    }
                }
                
                .content_spec_list::-webkit-scrollbar { /*滚动条整体样式*/
                    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }
                
                .content_spec_list::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
                    border-radius: 10px;
                    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    background: #535353;
                }
                
                .content_spec_list::-webkit-scrollbar-track { /*滚动条里面轨道*/
                    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                    border-radius: 10px;
                    background: #EDEDED;
                }
            }
        }
        
    }
</style>
